<template>
  <div>
    <el-card>
      <div slot="header" class="header">
        <span>销售额类别占比</span>
        <span class="button">
          <el-radio-group size="small" v-model="value">
            <el-radio-button label="全部渠道"></el-radio-button>
            <el-radio-button label="线上"></el-radio-button>
            <el-radio-button label="门店"></el-radio-button>
          </el-radio-group>
        </span>
      </div>
      <div>
        <div class="charts" ref="charts"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "全部渠道",
    };
  },
  mounted() {
    let echarts = require("echarts");
    let mycharts = echarts.init(this.$refs.charts);
    mycharts.setOption({
      title: {
        text: "",
        subtext: "",
        left: "center",
        top: 130,
        textStyle:{
            fontSize:20
        },
        subtextStyle: {
          color: "#a8a2a4",
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: "item",
      },
      //   legend: {
      //     top: '5%',
      //     left: 'center'
      //   },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            // position: 'outsize'
          },
          //   emphasis: {
          //     label: {
          //       show: true,
          //       fontSize: '40',
          //       fontWeight: 'bold'
          //     }
          //   },
          labelLine: {
            show: true,
          },
          data: [
            { value: 1048, name: "数据1" },
            { value: 735, name: "数据2" },
            { value: 580, name: "数据3" },
            { value: 484, name: "数据4" },
            { value: 300, name: "数据5" },
          ],
        },
      ],
    });
    // 绑定事件
    mycharts.on('mouseover',(params)=>{
        const {name,value} = params.data
        // 重新设置标题
        mycharts.setOption({
            title:{
                subtext:value,
                text:name
            }
        })
    })
  },
};
</script>

<style scoped>
.header {
  position: relative;
}
.header .button {
  position: absolute;
  top: -7px;
  right: 20px;
}
.charts {
  width: 100%;
  height: 300px;
}
</style>